<template>
  <div class="user">
    <div v-if="user.userphone">
      <!-- 采用cell单元格组件 -->
      <van-cell title="单元格" center>
        <!-- 左侧icon插槽 -->
        <template #icon>
          <van-image class="touxiang" round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </template>

        <!-- 如果使用了插槽，那么默认的title就不显示了 -->
        <template #title>
          <strong style="margin-left:10px">勤学吧</strong>
        </template>

        <template #extra>
          <a href="#">
            个人主页
            <van-icon name="arrow" style="position:relative;top:3px" />
          </a>
        </template>
      </van-cell>

      <!-- 采用grid宫格组件 -->
      <van-grid class="grid1">
        <van-grid-item>
          <template #icon>
            <span class="grid1-icon">99</span>
          </template>
          <template #text>
            <span class="grid1-text">头条</span>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #icon>
            <span class="grid1-icon">123</span>
          </template>
          <template #text>
            <span class="grid1-text">获赞</span>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #icon>
            <span class="grid1-icon">1001</span>
          </template>
          <template #text>
            <span class="grid1-text">粉丝</span>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #icon>
            <span class="grid1-icon">99</span>
          </template>
          <template #text>
            <span class="grid1-text">关注</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <div v-else>
      <van-cell title="单元格" center is-link to="/login">
        <!-- 左侧icon插槽 -->
        <template #icon>
          <van-image class="touxiang" round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </template>

        <!-- 如果使用了插槽，那么默认的title就不显示了 -->
        <template #title>
          <strong style="margin-left:10px">点击登录/注册</strong>
        </template>
      </van-cell>
    </div>

    <van-grid class="grid2 mt-20">
      <van-grid-item icon="bullhorn-o" text="消息通知" class="icon" />
      <van-grid-item icon="star-o" text="收藏" class="icon" />
      <van-grid-item icon="underway-o" text="浏览历史" class="icon" />
      <van-grid-item icon="down" text="下载管理" class="icon" />
    </van-grid>

    <van-cell title="编辑资料" is-link class="mt-20" />
    <van-cell title="账号安全" is-link />

    <van-cell class="mt-20" title="深色模式" is-link value="已关闭" />
    <van-cell title="大字模式">
      <template #extra>
        <van-switch v-model="checked" size="5vw" />
      </template>
    </van-cell>
    <van-cell title="字体大小" is-link value="中" />

    <van-cell title="退出登录" class="mt-20 logout" @click="loginOut" v-if="user.userphone" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      checked: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    loginOut() {
      this.$dialog.confirm({
        title: "提示",
        message: "你真的要退出吗？",
      })
        .then(() => {
          this.$store.commit("setUser", {});
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.user {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(243, 241, 241);
}
.grid1-icon {
  font-size: 30px;
}
.grid1-text {
  font-size: 26px;
  color: gray;
}
.touxiang {
  width: 46px;
  height: 46px;
}
.grid2 {
  .icon {
    color: orangered;
  }
}
.mt-20 {
  margin-top: 20px;
}
.logout {
  color: red;
  text-align: center;
}
</style>